<template>
    <div class="home1">
           <div class="swiper-container">
    <div class="swiper-wrapper">
              <div class="swiper-slide" @click="silde($event)" v-for="(val,ind) in img" :key="ind">
                 <img :src="val.hs_img">
              </div>
    </div>
    <!-- Add Pagination -->
    <div class="swiper-pagination"></div>
    <!-- Add Arrows -->
    <div class="swiper-button-next"></div>
    <div class="swiper-button-prev"></div>
  </div>
<div class="warp">
    <p class="toutou">小康推荐<span>为您甄选，悦心购买</span></p>
    <ul class="clearfix">
          <li class="item" v-for="(val,ind) in recommend1" :key="ind" :style="{backgroundColor:val.color}" @click="details(val.p_id)">
              <p class="title">{{val.p_name}}</p>
                    <div class="img"><img :src="val.p_img"/>  </div>
                <p class="pprice">￥{{val.p_price}}</p>
          </li>
          
    </ul>
  
</div>


<div class="remen_warp">
    <p class="toutou">热门<span>感动人心，价格厚道</span></p>
    <ul class="clearfix">
        <li class="remen" v-for="(val,ind) in recommend2" :key="ind" @click="details(val.p_id)">
            <div class="imgs"><img :src="val.p_img"/></div>
            <div class="xiang">
                <p class="tit">{{val.p_name}}</p>
                <p class="xi"> {{val.p_detailes}}</p>
            </div>
            <p class="pprice">￥{{val.p_price}}</p>

        </li>

    </ul>
</div>

<div class="xiaokang_warp">
    <p class="toutou">小康众筹<span>永远好奇，永远年轻</span><span class="gengduo" @click="most">>>更多众筹</span></p>
    <ul class="clearfix">
        <li class="xiaokang" v-for="(val,ind) in chot" :key="ind">
           <div class="xiaokang_inner">
               <p class="tit">{{val.c_name}}</p>
               <p class="xi">{{val.c_detailes}}</p>
               <p class="pprice">￥{{val.c_price}}</p>
                <div class="clearfix">
                    <img :src="val.cs_img"/>
                </div>
           </div>
           <div class="const">
               <span class="ren"><i>{{val.c_support}}</i>人支持</span>
               <span class="bai" >{{parseInt(val.c_arrive/val.c_targetmoney)}}%</span>
           </div>
          

        </li>

    </ul>
</div>

<div class="suoyou_warp">
    <p class="toutou">商品</p>
    <ul class="clearfix">
        <li class="suoyou" v-for="(val,ind) in zong" :key="ind" @click="details(val.p_id)">
            <div class="imgss"><img :src="val.p_img"/></div>
            <div class="suoyou_inner">
                <div class="xiang">
                <p class="tit">{{val.p_name}}</p>
                <p class="xi">{{val.p_detailes}}</p>
            </div>
            <p class="pprices">￥{{val.p_price}}</p>
            </div>

        </li>

    </ul>
</div>
  

    </div>
</template>

<script>
export default {
    data () {
        return {
             img:"",
          src:"",
          hs_id:"",
          recommend1:"",
          recommend2:"",
          chot:"",
          zong:""
        }
    },
mounted () {
    var swiper = new Swiper('.swiper-container', {
      centeredSlides: true,
       observer:true,
      observeParents:true,
      autoplay: {
        delay: 2500,
        disableOnInteraction: false,
      },
       loop: true,
      pagination: {
        el: '.swiper-pagination',
        clickable: true,
      },
      navigation: {
        nextEl: '.swiper-button-next',
        prevEl: '.swiper-button-prev',
      },
    });
},
created () {
    this.$axios.post("http://127.0.0.1:8081/client/hshop").then(res=>
    {
        console.log(res.data.val)
        this.img=res.data.val[0];
        this.recommend1=res.data.val[1];
        this.recommend2=res.data.val[2];
        this.chot=res.data.val[3];
        this.zong=res.data.val[4];
        this.recommend1[0].color="rgb(229, 233, 243)";
        this.recommend1[1].color="rgb(236, 233, 244)";
         this.recommend1[2].color="rgb(242, 238, 228)";
          this.recommend1[3].color="rgb(230, 239, 236)";
        //   console.log(this.recommend)
        // console.log(this.img[0].hs_img)
    })
    
},
methods: {
     silde(e)
    {
        this.src=e.path[0].src;
         this.$axios.post("http://127.0.0.1:8081/client/hshopid",{
             hs_img:this.src
         }).then(res=>
    {
        this.hs_id=res.data.id[0].hs_id;
        // this.$router.push({ name:'silde', params:{ shopId: this.hs_id,shopimg:this.src}})
        this.$router.push({path:"/silde",query:{id:this.hs_id}});
    })
    }, 
    details(p_id)
    {
          this.$router.push({path:"/details",query:{productid:p_id}});
    },
    most()
    {
           this.$router.push("/crowd");
    }
}
}
</script>

<style scoped>
.swiper-container {
      width: 100%;
      height: 100%;

    }
    .swiper-slide {
      text-align: center;
      font-size: 18px;
      background: #fff;

      /* Center slide text vertically */
      display: -webkit-box;
      display: -ms-flexbox;
      display: -webkit-flex;
      display: flex;
      -webkit-box-pack: center;
      -ms-flex-pack: center;
      -webkit-justify-content: center;
      justify-content: center;
      -webkit-box-align: center;
      -ms-flex-align: center;
      -webkit-align-items: center;
      align-items: center;
    }
  
    .home1 .swiper-container{
        margin: 0 auto;
        width: 1080px;
    }
    .home1 .swiper-container img{
        width: 100%;
        
    }
    .swiper-button-next,.swiper-button-prev
    {
        width: 38px;
        height: 38px;
        background: url("../../../../assets/images/jingling.png");
       
    }
    .swiper-button-prev{
 background-position:0 -1924px;
    }
    .swiper-button-next{
 background-position:0 -1840px;
    }
    .swiper-pagination-bullet-active
    {
 -webkit-box-shadow: 0 0 0 4px #ccc;
    box-shadow: 0 0 0 4px #ccc;
    background: #a7936e;
    border-radius: 500px;
    border: none;
    }

    .item,.remen,.suoyou{
  cursor: pointer;
  width: 248px;
  /* border: 1px #000 solid; */
  float: left;
  margin: 0 10px;
  padding: 20px;
  box-sizing: border-box
    }
    .suoyou{
      border:1px solid #eee;
      margin:15px 10px;
      padding: 0;
    }
    .xiaokang{
        cursor: pointer;
  width: 338px;
  border: 1px #eee solid;
  float: left;
  margin: 0 10px;
    }
    .remen{
        border: 1px solid #eee;
    }
    .remen img,.suoyou img{
        width: 100%
    }
    .warp,.remen_warp,.xiaokang_warp,.suoyou_warp{
        margin: 20px auto;
        width: 1080px;
    }

    .warp ul,.remen_warp ul,.xiaokang_warp ul,.suoyou_warp ul{
        margin-top: 20px;
    }
    .clearfix::after{
  content: "";
  clear: both;
  overflow: hidden;
  height: 0;
  display: block;
}
.toutou{
    color: #333;
    font-size: 28px;
    font-weight: 400;
    padding-bottom: 20px;
    border-bottom: 1px #eee solid;
}
.toutou span{
        margin-left: 12px;
    font-size: 14px;
    color: #999;
}
.item img{
    width: 117px;
}
.item .title{
        color: #333;
    margin-top: 0;
    font-size: 18px;
    line-height: 24px;
    height: 24px;
}
.img{
    text-align: center;
    margin-top: 20px;
}
.pprice{
    color: #a92112;
    font-size: 20px;
    text-align: center;
    line-height: 40px;
   
}
.pprices{
    color: #a92112;
    font-size: 20px;
    text-align: left;
    line-height: 40px;
}
.xiang{
    border-top:1px #eee solid
}
.xiang .tit,.xiaokang .tit{
     /* text-align: center; */
    color: #333;
    margin-top: 8px;
    font-size: 19px;
    line-height: 23px;
    height: 23px;
     overflow: hidden;
    white-space: nowrap;
    -o-text-overflow: ellipsis;
    text-overflow: ellipsis;
}
.xiang .xi,.xiaokang_inner .xi{
    /* text-align: center; */
        color: #666;
    font-size: 14px;
    line-height: 18px;
    height: 18px;
    margin-top: 8px;
    overflow: hidden;
    white-space: nowrap;
    -o-text-overflow: ellipsis;
    text-overflow: ellipsis;
}
.imgs{
    background: #faf6ef;
}
.imgss{
    background: #fff;
}
.remen_warp .remen:hover,.xiaokang:hover,.suoyou:hover{
    box-shadow: 3px 3px 10px #888888;
}
.xiaokang img{
    width: 150px;
    float: right;
    margin-right: 30px;
}
.xiaokang_inner{
    padding: 20px 0 0 20px;
     background-color: rgb(248, 248, 248);
}
.xiaokang_inner p{
    text-align: left;
    overflow: hidden;
    white-space: nowrap;
    -o-text-overflow: ellipsis;
    text-overflow: ellipsis;
}
.const{
    height: 40px;
    line-height: 40px;
}
.const .ren{
    float: left;
}
.const .bai{
    float: right;
    margin-right: 20px
}
.ren{
        color: #999;
    font-size: 15px;
    margin-left: 20px;
}
.ren i{
    margin-right: 6px;
    color: #a92112;
    font-size: 18px;
}
.bai{   
    margin-right: 15px;
    color: #a92112;
    font-size: 18px;
}
.gengduo{
      cursor: pointer;
      color: #333;
      float: right;
      margin-right: 10px;
      margin-top: 10px
}
.gengduo:hover{
    color: blue
}
.suoyou_inner{
    padding-left: 10px;
    background: rgb(236, 233, 244)
}
</style>
